<template>
  <div class="register">
    <my-header>
      <span>注册</span>
    </my-header>
    <div class="msg">
      <input type="text" v-model="v1" placeholder="请输入手机号" />
      <input type="text" v-model="v2" placeholder="请输入用户名" />
      <input type="password" v-model="v3" placeholder="请输入密码" />
      <input type="password" v-model="v4" placeholder="再次输入密码" />
      <button @click="register">注册</button>
      <router-link to="/login">
        <p>
          <b>
            <i>已有账号，马上登录</i>
          </b>
        </p>
      </router-link>
      <!-- <van-popup v-model="show">注册成功</van-popup> -->
    </div>
  </div>
</template>
<script>
import MyHeader from "@/components/MyHeader.vue";
import axios from "axios";
import qs from "qs";
import Vue from 'vue'

import { Dialog } from 'vant';
import { baseURL } from '../http/require';

// 全局注册
Vue.use(Dialog);

export default {
  components: {
    MyHeader,
    [Dialog.Component.name]: Dialog.Component
  },
  data() {
    return {
      v1: "",
      v2: "",
      v3: "",
      v4: "",
      show: false
    };
  },
  methods: {
    register() {
      let id = Math.random()
        .toString()
        .slice(2);
      if (
        this.v1.length != 0 &&
        this.v2.length != 0 &&
        this.v3.length != 0 &&
        this.v4.length != 0
      ) {
        if (
          /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/.test(
            this.v1
          )
        ) {
          if (this.v3 == this.v4) {
            axios
              .post(
                `${baseURL}/user/addUser`,
                qs.stringify({
                  phone: this.v1,
                  userName: this.v2,
                  passWord: this.v3,
                  id: id
                }),
                {
                  headers: {
                    "Content-Type":
                      "application/x-www-form-urlencoded;charset=UTF-8"
                  }
                }
              )
              .then(response => {
                console.log(response.data);
                if (response.data.code == 200) {
                  Dialog.alert({
                    message: "注册成功"
                  }).then(() => {
                    setTimeout(() => {
                      this.$router.push("/login");
                    }, 1000);
                  });
                }else {
                  Dialog.alert({
                    message: "注册失败"
                  }).then(() => {
                    setTimeout(() => {
                      this.$router.push("/register");
                    }, 0);
                  });
                }
              });
          }
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../css/reset.css";
.register {
  width: 100%;
  .msg {
    width: 100%;
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    input {
      width: 85%;
      height: 50px;
      border-radius: 10px;
      margin-bottom: 20px;
      border: 2px solid #faca2a;
      padding-left: 10px;
      font-size: 18px;
      outline: none;
    }
    button {
      width: 80%;
      height: 60px;
      font-size: 24px;
      color: #fff;
      background-color: #faca2a;
      border-radius: 10px;
      border: 0;
    }
    p {
      margin-top: 10px;
      color: deepskyblue;
    }
  }
}
</style>
